<template>
  <div class="AdendDialog">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="账号" prop="name">
            <el-input v-model="ruleForm.name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="username">
            <el-input v-model="ruleForm.username" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话" prop="mobile">
            <el-input v-model="ruleForm.mobile" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="生日">
            <el-date-picker
              clearable
              v-model="ruleForm.birthday"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="部门" prop="orgId">
            <el-cascader
              v-model="ruleForm.orgId"
              :options="orgTree"
              placeholder="请选择部门"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="ruleForm.remark" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["row"],
  data() {
    return {
      rowId: null,
      camList:[],
      ruleForm: {
        name: "",
        username: "",
        mobile: "",
        email: "",
        sex: 1,
        remark: "",
        orgId: "",
        classId: "",
        birthday: "",
        workArea: "",
        camId:""
      },
      classList: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        username: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[345789]\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        email: [
          {
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: "邮箱格式错误",
            trigger: "blur",
          },
        ],
        orgId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],
      },
      orgTree: [],
    };
  },
  created: function () {
    let row = this.row;
    this.rowId = row.userId;
    const params = {
      pCode: 'CAMPUS'
    }
    this.$server.queryDictList(params)
      .then(res => {
        console.log(res.data)
        this.camList = res.data
      })
    // 获取部门选择树
    this.getSysOrgTree();
    // 获取用户信息
    this.getSysUserInfoById();
  },
  mounted() {
    let params = {};
    this.$server.getMemberClassTreeList(params).then((res) => {
      this.classList = res.data;
    });
    console.log(this.row);
  },
  methods: {
    // 获取部门选择树
    getSysOrgTree: function () {
      let params = {};
      this.$server.getSysOrgTree(params).then((res) => {
        let orgTree = res.orgTree;
        orgTree = this.parseTreeJson(orgTree);
        this.orgTree = orgTree;
      });
    },

    // 递归组装部门树
    parseTreeJson: function (array) {
      let tempArr = [];
      for (let i = 0; i < array.length; i++) {
        let temp = {
          value: array[i].id,
          label: array[i].fullName,
        };
        if (array[i].childrens && typeof array[i].childrens == "object") {
          temp.children = this.parseTreeJson(array[i].childrens);
        }
        tempArr.push(temp);
      }
      return tempArr;
    },

    // 获取用户信息
    getSysUserInfoById: function () {
      let params = this.rowId;
      this.$server.getSysUserInfoById(params).then((res) => {
        console.log(res.user)
        this.ruleForm.username = res.user.username;
        this.ruleForm.name = res.user.name;
        this.ruleForm.mobile = res.user.mobile;
        this.ruleForm.email = res.user.email;
        this.ruleForm.remark = res.user.remark;
        this.ruleForm.sex = res.user.sex;
        this.ruleForm.birthday = res.user.birthday;
        this.ruleForm.workArea = res.user.workArea;
        let orgId = res.user.orgId;
        let orgArr = this.recursionOrg(this.orgTree, orgId);
        this.ruleForm.orgId = orgArr;
      });
    },
    // 递归获取部门树数组
    recursionOrg: function (orgTree, orgId) {
      let tempArr = [];
      for (let i = 0; i < orgTree.length; i++) {
        if (orgTree[i].value == orgId) {
          tempArr.push(orgTree[i].value);
          break;
        } else {
          if (orgTree[i].children && orgTree[i].children.length > 0) {
            tempArr = this.recursionOrg(orgTree[i].children, orgId);
            if (tempArr.length > 0) {
              tempArr.unshift(orgTree[i].value);
              break;
            }
          }
        }
      }
      return tempArr;
    },

    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            name: this.ruleForm.name,
            username: this.ruleForm.username,
            mobile: this.ruleForm.mobile,
            sex: this.ruleForm.sex,
            orgId: this.ruleForm.orgId[this.ruleForm.orgId.length - 1],
            email: this.ruleForm.email,
            remark: this.ruleForm.remark,
            userId: this.rowId,
            birthday: this.ruleForm.birthday,
            workArea: this.ruleForm.workArea,
          };
          this.$server.editSysUser(params).then((res) => {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            // 关闭弹框
            this.$emit("chang");
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$emit("chang");
    },
  },
};
</script>
<style lang="scss" scoped>
.AdendDialog {
}

.el-cascader {
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
#classList ::placeholder {
  color: #606266;
}
</style>
